<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>南实验楼智能化楼宇管理系统大屏</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/comon0.css" />
  </head>

  <style>
    /* 设置图表容器的样式 */
    #lineChart {
      width: 400px;
      height: 400px;
      margin-left: -200px auto;
    }
  </style>

  <body>
    <div class="loading">
      <div class="loadbox">
        <img src="../images/loading.gif" /> 页面加载中...
      </div>
    </div>
    <div class="head">
      <h1>个人信息</h1>
      <!--<div class="weather"><img src="images/weather.png"><span>多云转小雨</span><span>2017-12-30</span></div>-->
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: 4.1rem">
            <div class="alltitle">信息列表</div>

            <div class="sycm">
              <ul class="clearfix" style="align-items: center">
                <li><div>-</div></li>
                <li>
                  <div><img src="../images/touxinag.jpg" /></div>
                </li>
              </ul>
              <ul class="clearfix">
                <div
                  style="border-bottom: 1px solid rgba(255, 255, 255, 0.1)"
                ></div>
                <li>
                  <h2 id="maxAirConcentrationToday">-</h2>
                  <span>ID</span>
                </li>
                <li>
                  <h2 id="maxAirConcentrationYesterday">-</h2>
                  <span>姓名</span>
                </li>
                <li>
                  <h2 id="airConcentrationGrowthRate">-</h2>
                  <span>性别</span>
                </li>
              </ul>
            </div>
            <div class="boxfoot"></div>
          </div>

          <div style="height: 2.95rem">
            <div class="alltitle">综合表现</div>
            <div style="margin-top: 30px"></div>
            <div class="col-lg-6">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                    <div
                      id="scatterChart1"
                      style="width: 350px; height: 300px"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

         
        </li>

        <li>
          <div class="map">
            <div class="map1"><img src="../images/lbx.png" /></div>
            <div class="map2"><img src="../images/jt.png" /></div>
            <div class="map3"><img src="../images/map.png" /></div>
            <div class="map4" id="map_1"></div>
          </div>
        </li>

        <li>
          <div class="boxall" style="height: 4.2rem">
            <div class="alltitle">作业得分列表</div>

            <div
              style="
                height: 200px;
                width: 340px;
                font-size: 14px;
                color: white;
                /* overflow-y: auto; */
              "
            >
              <table>
                <thead style="width: 500px; text-align: center">
                  <th style="width: 140px; color: white; text-align: center">
                    作业名
                  </th>
                  <th style="width: 150px; color: white; text-align: center">
                    得分
                  </th>
                </thead>
                <tbody id="avgs">
                  <tr>
                    <td style="width: 150px; color: white; text-align: center">
                      -
                    </td>
                    <td style="width: 150px; color: white; text-align: center">
                      -
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div>
            <div class="alltitle">分数走势图</div>
            <div id="lineChart" style="margin-right: 110px;"></div>
          </div>

        </li>
      </ul>
    </div>
    <div class="back"></div>
    <script language="JavaScript" src="../js/js.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/china.js"></script>
    <script type="text/javascript" src="../js/area_echarts.js"></script>
    <script type="text/javascript" src="../js/http.js"></script>
    <script type="text/javascript">
      var studentInfoStr = window.localStorage.getItem("studentInfo");
      var studentInfo = JSON.parse(studentInfoStr);

      var id = studentInfo.id;
      var name = studentInfo.name;
      var sex = studentInfo.sex;

      $("#maxAirConcentrationToday").html(id);
      $("#maxAirConcentrationYesterday").html(name);
      $("#airConcentrationGrowthRate").html(sex);

      //综合表现
      var res1 = httpTableua({});
      if (res1.status != 500 && res1.success != null && res1.success) {
        var tableData = res1.data;
        console.log("tableData", tableData);

        datas = [];

        var max1 = 0;
        var max2 = 0;
        var max3 = 0;
        var max4 = 0;

        for (let i in tableData) {
          var t = tableData[i];

          valueData = [];
          valueData.push(t.postCount);
          valueData.push(t.completeCount);
          valueData.push(t.replyCount);
          valueData.push(t.score);

          datas.push({
            value: valueData,
            name: "",
          });

          if (t.postCount > max1) {
            max1 = t.postCount;
          }
          if (t.completeCount > max2) {
            max2 = t.completeCount;
          }
          if (t.replyCount > max3) {
            max3 = t.replyCount;
          }
          if (t.score > max4) {
            max4 = t.score;
          }
        }

        var myChart1 = echarts.init(document.getElementById("scatterChart1"));
        const animationDuration = 3000;

        var props = {
          className: {
            type: String,
            default: "chart",
          },
          width: {
            type: String,
            default: "100%",
          },
          height: {
            type: String,
            default: "300px",
          },
          data() {
            return {
              chart: null,
            };
          },
        };

        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          radar: {
            radius: "66%",
            center: ["50%", "42%"],
            splitNumber: 8,
            splitArea: {
              areaStyle: {
                color: "rgba(127,95,132,.3)",
                opacity: 1,
                shadowBlur: 45,
                shadowColor: "rgba(0,0,0,.5)",
                shadowOffsetX: 0,
                shadowOffsetY: 15,
              },
            },
            indicator: [
              { name: "作业完成度", max: max1 * 2 },
              { name: "提问积极性", max: max2 * 2 },
              { name: "作业成绩", max: 100 },
              { name: "回复活跃度", max: max4 * 1.5 },
            ],
          },
          series: [
            {
              type: "radar",
              symbolSize: 0,
              areaStyle: {
                normal: {
                  shadowBlur: 13,
                  shadowColor: "rgba(0,0,0,.2)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 10,
                  opacity: 1,
                },
              },
              data: datas,
              animationDuration: animationDuration,
            },
          ],
        };
        myChart1.setOption(option);
      } else {
        var tableData = res.data;
        console.log("tableData", tableData);

        var t1 = [];
        var t2 = [];
        var t3 = [];
        var t4 = [];

        for (let i in tableData) {
          var t = tableData[i];
          t1.push(t.postCount);
          t2.push(t.completeCount);
          t3.push(t.replyCount);
          t4.push(t.score);
        }

        var myChart1 = echarts.init(document.getElementById("scatterChart1"));
        const animationDuration = 3000;

        var props = {
          className: {
            type: String,
            default: "chart",
          },
          width: {
            type: String,
            default: "100%",
          },
          height: {
            type: String,
            default: "300px",
          },
          data() {
            return {
              chart: null,
            };
          },
        };

        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          radar: {
            radius: "66%",
            center: ["50%", "42%"],
            splitNumber: 8,
            splitArea: {
              areaStyle: {
                color: "rgba(127,95,132,.3)",
                opacity: 1,
                shadowBlur: 45,
                shadowColor: "rgba(0,0,0,.5)",
                shadowOffsetX: 0,
                shadowOffsetY: 15,
              },
            },
            indicator: [
              { name: "作业完成度", max: 100 },
              { name: "提问积极性", max: 100 },
              { name: "作业成绩", max: 100 },
              { name: "回复活跃度", max: 100 },
            ],
          },
          series: [
            {
              type: "radar",
              symbolSize: 0,
              areaStyle: {
                normal: {
                  shadowBlur: 13,
                  shadowColor: "rgba(0,0,0,.2)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 10,
                  opacity: 1,
                },
              },
              data: [
                {
                  value: [5000, 7000, 12000, 11000, 15000, 14000],
                  name: "Allocated Budget",
                },
                {
                  value: [4000, 9000, 15000, 15000, 13000, 11000],
                  name: "Expected Spending",
                },
                {
                  value: [5500, 11000, 12000, 15000, 12000, 12000],
                  name: "Actual Spending",
                },
                {
                  value: [5500, 8000, 1000, 11000, 12000, 12000],
                  name: "Actual Spending",
                },
              ],
              animationDuration: animationDuration,
            },
          ],
        };
        myChart1.setOption(option);
      }

      //作业
      var res3 = httpListAssignmentAll({ id: id });
      if (res3.success) {
        var data = res3.data;

        var htmlStr = "";
        for (let i in data) {
          htmlStr += `<tr>
                      <td style="width: 150px;color: white;text-align: center;">${data[i].name}</td>
                      <td style="width: 150px;color: white;text-align: center;">${data[i].score}</td>
                  </tr>`;
        }
        $("#avgs").html(htmlStr);
      }

      //分数走势图
      // 初始化 ECharts 实例
      var lineChart = echarts.init(document.getElementById("lineChart"));

      // 模拟的日期数据和分数数据

      var dates = ['2024-5-10'];
      var scores = [60];

      for(let i in res3.data){
        dates.push(res3.data[i].date); 
        scores.push(res3.data[i].score); 
      }

      console.log('dates',dates)
      console.log('scores',scores)

      // 将日期字符串转换为 JavaScript Date 对象
      var dateObjects = dates.map(function (dateString) {
        return new Date(dateString);
      });

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          formatter: "{b}: {c}", // 提示框格式：日期: 分数
        },
        xAxis: {
          type: "category",
          data: dateObjects.map(function (date) {
            return date.toLocaleDateString(); // 将日期对象格式化为本地日期字符串
          }),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: scores,
            type: "line",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表
      lineChart.setOption(option);
    </script>
  </body>
</html>
